<template>
    <h2>vue列表渲染</h2>

    <!-- <ol >
        <li v-for="item in nameArry">{{item}}</li>
    </ol>
    <ul>
        <li  v-for="item in nameArry">{{item}}</li>
    </ul> -->

    <table border="1">
        <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>手机号</td>
            </tr>
        </thead>
        <tbody>
             <tr v-for="item in nameArry">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.tel}}</td>
            </tr>
        </tbody>
    </table>


</template>

<script setup lang="ts">
    //声明数组同属初始化数据 []:数组 {}:对象
    //const nameArry:string[]=["张三","李四","王五","赵六"]
    const nameArry:string[]=[
    {
        name:"张三",
        age:19,
        sex:"男",
        tel:"15678980989"
    },
    {
        name:"李四",
        age:23,
        sex:"男",
        tel:"15678980989"
    },
    {
        name:"王五",
        age:19,
        sex:"男",
        tel:"15678980989"
    },
    {
        name:"赵六",
        age:28,
        sex:"男",
        tel:"15678980989"
    }
    ]

</script>
